<!--楼宇设备-->
<template>
  <div class="main">
    <!--头部-->
<!--    <div class="mainUpStyle">-->
<!--      <div class="upStyle">-->
<!--        <span class="textStyle">设备故障报修</span>-->
<!--      </div>-->
<!--    </div>-->
    <basic-layout title="设备故障报修" :showAddBtn="false">
    <!--数据-->
    <van-form class="dataStyle" ref="form">
      <van-cell-group>
        <div class="cellDataStyle">
          <div class="imgStyle1" />
          <div class="cellTextStyle">
            <van-field
              :readonly="true"
              :disabled="true"
              v-model="dataInfo.shebmc"
              label="设备名称"
              :border="false"
              input-align="right"
            />
          </div>
        </div>
        <div class="cellDataStyle">
          <div class="imgStyle2" />
          <div class="cellTextStyle">
            <van-field
              :readonly="true"
              :disabled="true"
              v-model="dataInfo.xingh"
              label="设备型号"
              :border="false"
              input-align="right"
            />
          </div>
        </div>
        <div class="cellDataStyle">
          <div class="imgStyle3" />
          <div class="cellTextStyle">
            <van-field
              :readonly="true"
              :disabled="true"
              v-model="dataInfo.dal"
              label="设备大类"
              :border="false"
              input-align="right"
            />
          </div>
        </div>
        <div class="cellDataStyle">
          <div class="imgStyle4" />
          <div class="cellTextStyle">
            <van-field
              :readonly="true"
              :disabled="true"
              v-model="dataInfo.xiaol"
              label="设备小类"
              :border="false"
              input-align="right"
            />
          </div>
        </div>
        <div class="van-hairline--top vanHairlineTop"></div>
        <div class="cellDataStyle">
          <div class="imgStyle5" />
          <div class="cellTextStyle">
            <van-field
              :readonly="true"
              :disabled="true"
              v-model="dataInfo.zhuangt"
              label="状态"
              :border="false"
              input-align="right"
            />
          </div>
        </div>
        <div class="cellDataStyle">
          <div class="imgStyle6" />
          <div class="cellTextStyle">
            <van-field
              :readonly="true"
              :disabled="true"
              v-model="dataInfo.isWeixIng"
              label="是否报修"
              :border="false"
              input-align="right"
            />
          </div>
        </div>
        <div class="van-hairline--top vanHairlineTop"></div>
        <div class="remarkStyle">
          <div class="remarkUpTextStyle">
            <div class="imgStyle7" />
            <div>申请理由</div>
          </div>
          <van-field
            rows="2"
            autosize
            v-model="dataInfo.shenqly"
            label=""
            type="textarea"
            placeholder="请输入申请理由"
          />
          <div></div>
        </div>
        <div class="van-hairline--top vanHairlineTop"></div>
        <div class="remarkStyle">
          <div class="remarkUpTextStyle">
            <div class="imgStyle8" />
            <div>设备故障图</div>
          </div>
          <van-field name="uploader" label=" ">
            <template #input>
              <uploadCom
                ref="uploadRef"
                :defaultFiles="defaultFiles"
                @uploadFile="handleUpload"
                @deleteFile="handleDelete"
                :max-count="maxCount"
              ></uploadCom>
            </template>
          </van-field>
          <div></div>
        </div>
        <div class="buttonMainStyle">
          <van-button
            @click="saveHandle"
            class="vanButtonStyle"
            style="
              background: -webkit-gradient(
                linear,
                0% 0%,
                100% 0%,
                from(rgb(17 216 14 / 41%)),
                to(rgba(14, 150, 216, 0.53))
              );
            "
            type="primary"
          >
            提交
          </van-button>
        </div>
      </van-cell-group>
    </van-form>
    <fullLoading v-if="loading"></fullLoading>
    </basic-layout>
  </div>
</template>
<script>
import { saveGuzbx, upload ,getUpload} from "@api/srvAssurance/assetLabel/assetLabel";
export default {
  data() {
    return {
      maxCount: 1,
      fileList: {
        file : null,
      },
      defaultFiles: [],
      deleteAttachIdArr: [],
      loading: false,
      dataInfo: {},
      formData: {},
      queryParam: {},
    };
  },

  created() {
    let data = this.$route.query.dataInfo;
    if (data != '"[object Object]"') {
      this.dataInfo = data;
      sessionStorage.setItem("inspectionEdit-dataInfo", JSON.stringify(data));
    } else {
      var item = sessionStorage.getItem("inspectionEdit-dataInfo");
      var dataParse = JSON.parse(item);
      this.dataInfo = dataParse;
    }
  },

  methods: {
    // 预上传附件
    handleUpload(files) {
      this.fileList.file = files;
      // let res =  getUpload(this.formData);
    },
    // 已经保存的删除附件id
    handleDelete(arr) {
      this.deleteAttachIdArr = arr;
    },

    async saveHandle() {
      this.formData.shebType = this.dataInfo.shebType;
      this.formData.weixsb = this.dataInfo.id;
      this.formData.shenqly = this.dataInfo.shenqly;
      if(this.fileList.file != null){
        let data = new FormData();
        data.append('file', this.fileList.file[0]);
        let res = await getUpload(data);
        if(res.status == '0'){
          this.formData.fuj = res.id;
          let ress = await saveGuzbx(this.formData);
          if (ress.status == 0) {
            this.$toast("报修成功");
            this.$router.back();
          }
        }
      }else{
        let ress = await saveGuzbx(this.formData);
        if (ress.status == 0) {
          this.$toast("报修成功");
          this.$router.back();
        }
      }


    },
  },
};
</script>

<style scoped lang="less">
.main {
  height: 120%;
  background-color: #80808017;

  .mainUpStyle {
    background: -webkit-gradient(
      linear,
      0% 0%,
      100% 0%,
      from(rgb(14 150 216)),
      to(rgba(14, 150, 216, 0.53))
    );
    height: 55px;

    .upStyle {
      float: left;
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: center;
      align-items: center;

      .textStyle {
        color: #ffff;
        font-size: 20px;
        font-weight: 500;
      }
    }

    .upStyleImg {
      height: 30px;
      width: 30px;
      margin-top: 13px;
      position: absolute;
      margin-left: 85%;
      background: url("../../../assets/images/nx/icon_goods_save.png")
        no-repeat;
      background-size: 100% 100%;
    }
  }

  .dataStyle {
    overflow-y: scroll;
    height: calc(100% - 75px);
    margin: 10px;
    border-radius: 10px;

    .cellDataStyle {
      width: calc(100% - 30px);
      display: -webkit-inline-box;
      padding: 15px 15px 15px;

      .imgStyle1 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_device_name.png")
          no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle2 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_device_model.png")
          no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle3 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_first_category.png")
          no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle4 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_second_category.png")
          no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle5 {
        height: 20px;
        width: 20px;
        margin-top: 2px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_device_category.png")
          no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle6 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_repair.png")
          no-repeat;
        background-size: 100% 100%;
      }
      .cellTextStyle {
        width: calc(100% - 24px);

        div {
          padding: 0px 0px 0px 15px;
        }
      }
    }

    .vanHairlineTop {
      margin: 0px 25px;
      height: 0px;
    }

    /deep/ .van-hairline--top:after {
      border: 1px solid #00000029;
    }

    .remarkStyle {
      padding: 15px 15px 50px 15px;

      .remarkUpTextStyle {
        display: -webkit-inline-box;
        .imgStyle7 {
          height: 20px;
          width: 20px;
          text-align: center;
          background: url("../../../assets/images/nx/icon_text_filled.png")
            no-repeat;
          background-size: 100% 100%;
        }
        .imgStyle8 {
          height: 20px;
          width: 20px;
          text-align: center;
          background: url("../../../assets/images/nx/icon_picture.png")
            no-repeat;
          background-size: 100% 100%;
        }
      }

      .remarkDownTextStyle {
        div {
          padding: 0px 0px 0px 5px;
        }
      }
    }

    .buttonMainStyle {
      display: flex;
      justify-content: space-around;
      height: 75px;
      width: 100%;

      .vanButtonStyle {
        border-radius: 10px;
        width: 85%;
        display: flex;
        justify-content: space-around;
        border: none;
        font-size: 20px;
      }
    }

    .cellTextStyleSingle {
      padding: 15px;

      div {
        padding: 0px 0px 0px 15px;
      }
    }
  }

  .dialogMainStyle {
    .dialogSearchStyle {
      position: fixed;
      width: 100%;
    }

    .dialogDataStyle {
      text-align: center;
      margin-top: 50px;

      div {
        padding: 10px;
      }
    }
  }

  .vanDialogMainStyle {
    .vanDialogStyle {
      position: fixed;
      width: 100%;
    }

    .vanDialogDataStyle {
      text-align: center;
      margin-top: 50px;

      div {
        padding: 10px;
      }
    }
  }
}

/deep/ .van-dialog {
  height: 70%;
}

/deep/ .van-field__label {
  color: #646566;
}

/deep/ .van-dialog__content {
  overflow-y: scroll;
  height: 90%;
}
</style>
